<template>
  <Form :model="row" :rules="ruleValidate" ref="validForm">
    <FormItem label="菜单名" label-position="top" prop="menuName" :error="error.menuName">
      <Input v-model="row.menuName" placeholder="请输入菜单名"/>
    </FormItem>

    <FormItem label="显示图标" label-position="top" prop="icon" :error="error.icon">
      <Select v-model="row.icon" placeholder="请选择菜单图标" @on-change="icon=$event">
        <template #prefix>
          <Icon :type="icon" :size="20"/>
        </template>
        <Option v-for="item in iconList"
                :value="item" :key="item">
          <Icon :type="item" :size="25" class="icon"/>
          {{ item }}
        </Option>
      </Select>
    </FormItem>

    <FormItem label="排序" label-position="top" prop="sort" :error="error.sort">
      <InputNumber v-model="row.sort" placeholder=""/>
      <b style="padding: 0 5px">请输入排序的数字,数字越大,优先级越低</b>
    </FormItem>

    <FormItem label="菜单描述" label-position="top">
      <Input type="textarea" v-model="row.description" :rows="4" placeholder="请输入菜单描述信息"/>
    </FormItem>

    <FormItem label="状态" label-position="top" :error="error.state">
      <Switch size="large" v-model="row.state">
        <template #open>
          <span>启用</span>
        </template>
        <template #close>
          <span>禁用</span>
        </template>
      </Switch>
    </FormItem>
  </Form>

  <div class="demo-drawer-footer">
    <Button style="margin-right: 8px" @click="$emit('close-win', false)">关闭</Button>
    <Button type="primary" :loading="loading" @click="handlerMenu">保存</Button>
  </div>
</template>

<script>
export default {
  props: {
    row: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      error: {},
      loading: false,
      icon: "ios-image",
      iconList: [],
      ruleValidate: {
        menuName: [
          {required: true, message: "菜单名不能为空", trigger: 'blur'},
        ],
        icon: [
          {required: true, message: "图标不能为空", trigger: 'change'},
        ],
        sort: [
          {type: "number", message: "排序值必须是一个数字", trigger: 'blur'},
        ]
      }
    }
  },
  emits: ["close-win"],
  created() {
    // 使用 fetch 发送异步请求，查询当前项目中存放的 json 数据
    fetch(new URL("../assets/json/icon.json", import.meta.url).href)
        .then(response => response.json())
        .then(ret => {
          this.iconList = ret;
        })
  },
  methods: {
    resetError() {
      this.error = {};
      this.$refs.validForm.resetFields();
    },
    handlerMenu() {
      this.loading = true ;
      this.error = {};
      this.$refs.validForm.validate(valid => {
        if (valid) {
          if (this.row.id == null) { // 添加菜单// 如果校验成功，则发送异步请求，添加数据
            this.handleSave();
          } else {
            this.handleUpdate();
          }
        }else{
          this.loading = false;
        }
      })
    },
    handleSave() {
      this.$api.addMenu(this.row).then(ret => {
        this.loading = false;
        if (ret.data.status) {
          this.$tips.success("添加菜单成功");
          // 关闭窗口
          this.$emit('close-win', 'save');
        } else {
          this.error = ret.data.error;
        }
      })
    },
    handleUpdate() {
      this.$api.updateMenu(this.row).then(ret => {
        this.loading = false;
        if (ret.data.status) {
          this.$tips.success("修改菜单成功");
          // 关闭窗口
          this.$emit('close-win', 'update');
        } else {
          this.error = ret.data.error;
        }
      })
    }
  },

}
</script>

<style scoped>
.icon {
  vertical-align: middle;
  margin: 0 3px;;
}

.demo-drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>
